import React, { useState, useEffect } from 'react';

let timeChange;

const Set = () => {
  const [time, setTime] = useState(10);
  const [btnDisabled, setBtnDisabled] = useState(false);
  const [btnContent, setBtnContent] = useState('获取验证码');

  useEffect(() => {
    clearInterval(timeChange);
    return () => clearInterval(timeChange);
  }, []);

  useEffect(() => {
    if (time > 0 && time < 10) {
      setBtnContent(`${time}s后重发`);
    } else {
      clearInterval(timeChange);
      setBtnDisabled(false);
      setTime(10);
      setBtnContent('获取验证码');
    }
  }, [time]);

  const getPhoneCaptcha = () => {
  	// 注意，不要使用 setTime(t-1) ： 闭包问题会导致time一直为59
    timeChange = setInterval(() => setTime(t => --t), 1000);
    setBtnDisabled(true);
  };
  return (
    <button disabled={btnDisabled} onClick={getPhoneCaptcha}>
      {btnContent}
    </button>
  );
};

export default Set;